<template>
<div class="scroller-warp">
  <RecycleScroller
    class="scroller"
    :items="rows"
    :item-size="32"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="user">
      {{ item.name }}
    </div>
  </RecycleScroller>

</div>
</template>

<script setup>
import {ref} from 'vue'
const rows = ref(Array.from({ length: 2000 }, (_, index) => ({
  id: index,
  name: `Name ${index}`,
  age: Math.floor(Math.random() * 100),
  email: `email${index}@example.com`
})));
 
</script>

<style scoped>
.scroller-warp{
  border: 1px solid;
}
.scroller {
  height: 600px;
  overflow-y: auto;
}

.user {
  height: 32%;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
</style>